<script setup lang="ts">
import { requiredCheck } from "@/utils/verify";
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
import { editData } from "@/api/modules/system/account";
import { useUserStore } from "@/stores/modules/user";

const userStore = useUserStore();
const username = computed(() => userStore.userInfo.name);
const router = useRouter();

interface Props {
  title?: string;
  rowData?: Object;
}

const props = withDefaults(defineProps<Props>(), {
  title: "重置密码",
  rowData: undefined
});
defineOptions({
  name: "UpdateFormPassword" // 默认策略
});
import useUpdate from "@/hooks/useUpdate";
import { ElMessage } from "element-plus";
import { LOGIN_URL } from "@/config";

const emits = defineEmits(["success"]);
const { updateFormData, updateFormRef, updateFormRules, submit, showHandle, openHandle, closeHandle } = useUpdate({
  rules: {
    userName: [...requiredCheck("请输入用户名称")],
    roleIds: [...requiredCheck("请选择角色")],
    password: [...requiredCheck("请输入密码")],
    passwordRe: [
      {
        validator: (rule, value, callback) => {
          if (value !== updateFormData.password) {
            callback(new Error("两次输入的密码不一致"));
          } else {
            callback();
          }
        },
        trigger: "blur"
      }
    ]
  },
  defaultData: {}
});
// onMounted(() => {
//   console.info(props.rowData);
// });
//

async function submitCb() {
  const name = updateFormData.name;
  await submit({
    addData: editData,
    updateApi: editData,
    sendData: {
      name: updateFormData.name,
      passwordRe: updateFormData.passwordRe || "",
      password: updateFormData.password || "",
      role: updateFormData.role,
      id: updateFormData?.id
    }
  });
  console.log(username.value);
  console.log(name);
  if (username.value === name) {
    setTimeout(() => {
      ElMessage.success("您的密码已重置，请重新登录!");
    }, 1000);
    setTimeout(() => {
      // 2.清除 Token
      userStore.setToken("");
      localStorage.clear();
      sessionStorage.clear();
      // 3.重定向到登陆页
      router.replace(LOGIN_URL);
    }, 2500);
  }
  emits("success");
}
</script>

<template>
  <div
    class="update-form mg-r-sm"
    style="display: inline-block"
    @click="
      openHandle({
        row: {
          ...rowData,
          status: 1,
          id: props.rowData?.id
        },
        id: props.rowData?.id
      })
    "
  >
    <slot>
      <el-button type="primary">新增</el-button>
    </slot>
  </div>
  <base-dialog @confirm="submitCb()" width="30%" :title="title" v-model="showHandle">
    <div class="details">
      <div class="details-main">
        <el-form ref="updateFormRef" :model="updateFormData" :rules="updateFormRules" label-width="120px" label-suffix="：">
          <el-form-item label="用户名" prop="name">
            <el-input style="width: 240px" disabled v-model="updateFormData.name" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="用户密码" prop="password">
            <el-input
              style="width: 240px"
              show-password
              v-model.trim="updateFormData.password"
              autocomplete="off"
              placeholder="请输入密码"
              maxlength="20"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="passwordRe">
            <el-input
              show-password
              style="width: 240px"
              type="password"
              placeholder="请再次输入密码"
              v-model.trim="updateFormData.passwordRe"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer-more-button></template>
  </base-dialog>
</template>

<style lang="scss" scoped></style>
